import "../../assets/header/style/userHeader.css";
import UserAvatar from "./userAvatar.jsx";
import UserInfo from "./userInfo.jsx";
import {getUserInfo} from "../../api/header/interface/userManage";
import {useEffect, useState} from "react";
import {Header} from "antd/es/layout/layout";

export default function UserHeader() {
    const [userInfo, setUserInfo] = useState({});
    useEffect(() => {
        getUserInfo().then(({data}) => {
            console.log("🚀 ~ file: index.jsx ~ line 10 ~ useEffect ~ res", data);
            setUserInfo(data);
        });
    }, []);

    return (
        <Header className='user-header-container'
                style={{
                    width: "100%",
                    position: "fixed",
                    zIndex: 99,
                    backgroundColor: '#fafafa',
                    boxShadow: "#0a0a0a2e 0 0 18px 0px"
                }}>
            <UserAvatar {...userInfo} />
            <UserInfo {...userInfo} />
        </Header>
    );
}